<template>
  <li
    class="menu-child"
    :class="{ 'menu-child-pc': equ === 'pc' }"
  >
    <div>
      <div
        class="line"
        :class="{ active: isBeforeNode }"
      ></div>
      <div
        v-if="isActive"
        class="line current"
      ></div>
      <div
        class="circle"
        :class="{ active: isActive || isBeforeNode }"
      ></div>
      <div
        class="content"
        :style="{ 'paddingLeft': `${levelPadding}px` }"
        @click="setCurrent"
      >
        <span
          class="text"
          :class="{ 'text-[#7DD0FF]': isActive }"
        >
          <img
            v-if="hasChild"
            class="icon"
            :class="{ 'icon-rotate': hasChild && !node.open }"
            src="@/assets/icons/h5/arrow_d.svg"
            @click.stop="toggleTree"
          />
          <span>{{ node.name }}</span>
        </span>
        <span v-if="isActiveChapter">
          <span
            class="active-node"
            :class="{ 'opacity-0': !isActive }"
          >
            当前讲解...
          </span>
        </span>
      </div>

      <trans v-if="hasChild && node.open">
        <ul class="child-node">
          <SideNodeTags
            v-for="(x, i) in node.children"
            :key="i"
            v-model:level="getLevel"
            v-model:node="nodeData.children[i]"
          />
        </ul>
      </trans>
    </div>
  </li>
</template>

<script lang="ts" setup name="SideNodeTags">
import { WritableComputedRef } from 'vue'
import { useTreeStore } from '@/store/tree'
import { equ } from '../../../../package-env'

const props = defineProps({
  node: {
    type: Object,
    default: () => ({}),
  },
  level: {
    type: Number,
    default: () => 0
  },
  type: {
    type: String,
    default: ''
  }
})

const treeStore = useTreeStore()
const emit = defineEmits(['update:node'])
const current: LooseObject = inject('current')
const nodeClick: LooseFunction = inject('nodeClick')

const nodeData: WritableComputedRef<LooseObject> = computed({
  get: () => props.node,
  set: (v) => emit('update:node', v),
})
const hasChild = computed(() => nodeData.value.children && nodeData.value.children.length > 0)
const getLevel = computed(() => props.level + 1)
const levelPadding = computed(() => {
  // pc端li正文padding
  if (equ === 'pc') {
    return 15 + props.level * 20 + (!hasChild.value ? 10 : 0)
  }
  return props.level * 20 + (!hasChild.value ? 5 : 0)
})
const isCurrentNode = computed(() => current.value && current.value.content === props.node.content)

const toggleTree = () => {
  nodeData.value = { ...nodeData.value, open: !nodeData.value.open }
}

const setCurrent = () => {
  current.value = nodeData.value
  nodeClick(nodeData.value)
}

// 获取当前运行节点之前的节点
const isBeforeNode = computed(() => {
  if (!isCurrentNode.value) {
    return false
  }
  const beforeNodes: LooseObject = treeStore.getBeforeNode()
  return beforeNodes.includes(nodeData.value?.id);
})

// 判断当前节点是否播放中
const isActive = computed(() => {
  if (!isCurrentNode.value) {
    return false
  }
  const { id, is_catalogue } = current.value || {}
  if (is_catalogue) return nodeData.value.id === id
  const parent: LooseObject = treeStore.getParent()
  for (let i = parent.length - 1; i >= 0; i--) {
    if (parent[i].is_catalogue) {
      return nodeData.value.id === parent[i].id
    }
  }
  return false
})

// 判断当前章节是否播放中
const isActiveChapter = computed(() => treeStore.content_id === props.node.content)
</script>

<style lang="scss" scoped>
.menu-child {
  @apply relative;
  font-size: 14px;
  list-style-type: none;
  color: #ffffff;

  .line {
    @apply absolute h-full;
    top: 0px;
    left: 4px;
    border-left: 1px solid #284C63;

    &.active {
      border-color: #336B97;
    }

    &.current {
      height: calc(100% - 20px);
      border-color: #336B97;
    }
  }

  .circle {
    @apply absolute;
    height: 3px;
    width: 3px;
    left: 3px;
    top: 17px;
    background: rgb(50, 100, 129);
    transform: rotate(45deg);

    &.active {
      background: rgba(76, 190, 255, 1);
    }
  }

  .content {
    @apply flex items-center justify-between cursor-pointer;
    margin-left: 18px;
    font-size: 13px;
    font-weight: 200;
    padding: 9px 0;
    padding-right: 10px;

    &:active {
      background: rgba(255, 255, 255, 0.25);
    }

    .active-node {
      font-size: 12px;
      margin-left: 5px;
      transform: scale(0.8);
      color: rgb(76, 190, 255);
    }

    .text {
      @apply overflow-ellipsis overflow-hidden whitespace-nowrap flex-1;
    }

    &.current {
      color: rgba(76, 190, 255, 1);
    }
  }

  .icon {
    @apply inline-block;
    width: 11px;
    height: 6px;
    margin-right: 6px;
    transform: rotate(180deg);

    &-rotate {
      transform: rotate(0);
    }
  }

  &-pc {
    .content {
      font-size: 16px;
      margin-left: 14px;

      &:hover {
        background: rgba(255, 255, 255, 0.25);
      }

      .active-node {
        transform: scale(1);
      }
    }

    .icon {
      width: 13px;
      height: 7px;
      margin-right: 7px;
    }

    .circle {
      height: 5px;
      width: 5px;
      left: 2px;

      &.active {
        background: rgba(146, 215, 255, 1);
      }
    }

    .line {
      &.active {
        border-color: #6D9AC4;
      }

      &.current {
        border-color: #6D9AC4;
      }
    }
  }
}</style>